import React from 'react'
import Player from '../player/player'
import './desk.css'

class Desk extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      players :[1,2,3,4,5,6,7,8,9,10,11,12],
    }
  }

  render(){
    
    const leftPosition = this.state.players.slice(0,6);
    const leftPlayers = leftPosition.map((num,index) => {
      return (
        <Player number={num} key={index} numIsLeft={true}></Player>
      )
    });

    const rightPosition = this.state.players.slice(6);
    const rightPlayers = rightPosition.map((num,index) => {
      return (
        <Player number={num} key={index} numIsLeft={false}></Player>
      )
    })


    return(
      <div className="desk">
        <div className="desk-left">
          {leftPlayers}
        </div>
        <div className="desk-right">
          {rightPlayers}
        </div>
      </div>
    )
  }
}

export default Desk;